<template>
  <div class="upload-container">


    <el-upload class="avatar-uploader" action="http://up-z0.qiniup.com" :show-file-list="false" :on-success="handleAvatarSuccess"
      :data="{ token: qiniu.token }">
      点击更换
      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>

<script>
  import {
    dateHandle,
    qiniuToken
  } from '@/api/dateHandle';

  export default {
    name: 'UpImage',
    props: {
      value: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        imageUrl: '',
        qiniu: {}
      }
    },
    created() {
      // console.log(111);
      this.qiniuGet();
    },
    computed: {
      getValue() {
        return this.value
      }
    },
    methods: {
      qiniuGet() {
        qiniuToken().then(res => {
          console.log(this.getValue);
          this.qiniu = res.data;
          let value = this.getValue;
          if (value)
            this.imageUrl = res.data.domain + this.getValue;

        });
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        this.emitInput(res.key);
      },
      emitInput(val) {
        this.$emit('input', val)
      },
    }
  }
</script>

<style>
  .avatar-uploader .el-upload {
    margin-left: 20px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 200px;
    height: 250px;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 198px;
    height: 198px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 200px;
    height: 200px;
    display: block;
  }
</style>
